<template>
	<view :data-theme="theme" class="container">
		<scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true"
			:style='"height:"+height+"px;"' @scroll="scroll">
			<view class="card">
				<view class="header-top" style="position: relative;">
					<view class="header_name u-line-1 card_text">{{activeData.activityName}}</view>
					<view class="main_color" style="font-size: 30rpx;width: 120rpx;">{{activeData.status}}</view>
				</view>
				<view class="top-content" style="margin-top: 20rpx;line-height: 1.3;color: #000;font-size: 28rpx;">
					{{activeData.content}}
				</view>
				<view class="top-content" style="margin-top: 20rpx;line-height: 1.3;color: #000;font-size: 28rpx;">
					<text style="font-weight: bold;">{{activeData.call}}</text>
					<text style="color: red;margin-left: 10rpx;">{{activeData.callList}}</text>
				</view>
			</view>

			<!-- <view class='navbar' :class="opacity>0.6?'bgwhite':''"> -->
			<view class='navbar' :class="opacity>0.6?'bgwhite':''">
				<view class='navbarH' :style='"height:"+navH+"rpx;"'>
					<view class='navbarCon acea-row'>
						<!-- #ifdef MP -->
						<view class="select_nav flex justify-center align-center" id="home"
							:style="{ top: homeTop + 'rpx' }">
							<text class="iconfont icon-fanhui2 px-20" @tap="returns"></text>
							<text class="iconfont icon-gengduo5 px-20" @tap="showNav"></text>
							<text class="nav_line"></text>
						</view>
						<!-- #endif -->
						
						<view class="tab_nav" v-show="opacity > 0.6">
							<!-- <view class="tab_nav"> -->
							<view class="header flex align-center">
								<view class="item" :class="navActive === index ? 'on' : ''"
									v-for="(item,index) in navList" :key='index' @tap="tap(index)">
									{{ item }}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- <view style="margin: 0 20rpx;">
			<u-tabs :list="list1" lineWidth="40" :activeStyle="{color:bgColor}" :lineColor="bgColor"></u-tabs>
		</view> -->


			<view>
				<view id="past0" class="card">
					<view class="border-item">
						<view class="header-top" @click="infoIsShow" style="line-height: 90rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">报名要求</view>
							<u-icon :name="showUpInfoPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
						</view>
						<view v-if="showUpInfoPopup" style="font-size: 28rpx;padding-bottom: 30rpx;color: #000;">

							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									活动时间
								</view>
								<view style="flex: 3;">
									{{activeData.activityTime}}-{{activeData.deadline}}
								</view>
							</view>

							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									活动范围
								</view>
								<view style="flex: 3;">
									<view v-if="activeData.activityScope"><rich-text :nodes="activeData.activityScope"></rich-text></view>
									<view v-else>无</view>
								</view>
							</view>
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									活动要求
								</view>
								<view style="flex: 3;">
									<view v-if="activeData.activityRequirement"><rich-text :nodes="activeData.activityRequirement"></rich-text></view>
									<view v-else>无</view>
								</view>
							</view>
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									活动规则
								</view>
								<view style="flex: 3;">
									<view v-if="activeData.activityRules"><rich-text :nodes="activeData.activityDescription"></rich-text></view>
									<view v-else>无</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view id="past1" class="card">
					<view class="border-item">
						<view class="header-top" @click="activeIsShow" style="line-height: 90rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">活动介绍</view>
							<u-icon :name="activeShowUpPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
						</view>
						<view v-if="activeShowUpPopup" style="font-size: 28rpx;padding-bottom: 30rpx;">
							<view style="margin: 15rpx 0;line-height: 40rpx;">
								<view style="color: #383838;">
									<rich-text v-if="activeData.activityDescription" :nodes="activeData.activityDescription"></rich-text>
									<view v-else>无</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view id="past2" class="card">
					<view class="border-item">
						<view class="header-top" @click="suggestIsShow" style="line-height: 90rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">报名建议</view>
							<u-icon :name="suggestShowUpPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
						</view>
						<view v-if="suggestShowUpPopup" style="font-size: 28rpx;padding-bottom: 30rpx;">
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;">
									<rich-text v-if="activeData.registrationSuggestion" :nodes="activeData.registrationSuggestion"></rich-text>
									<view v-else>无</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view id="past3" class="card">
					<view class="border-item">
						<view class="header-top" @click="commonIsShow" style="line-height: 90rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">常见问题</view>
							<u-icon :name="commonShowUpPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
						</view>
						<view v-if="commonShowUpPopup" style="font-size: 28rpx;padding-bottom: 30rpx;">
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;">
									<rich-text v-if="activeData.commonProblem" :nodes="activeData.commonProblem"></rich-text>
									<view v-else>无</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view style="height: 170rpx;">

				</view>
			</view>

		</scroll-view>


		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<view class="read-contract-item">
				<checkbox-group @change="readItemChange">
					<label class="uni-list-cell uni-list-cell-pd" style="display: flex;align-items: center;">
						<view>
							<checkbox value="true" :checked="isSureRead" />
						</view>
						<view>已阅读并同意 <text class="main_color">《报名活动须知》</text> </view>
					</label>
				</checkbox-group>
			</view>
			<view class="footer-class" style="display: flex;align-items: center;">
				<view style="flex: 1;">
					<!-- <text class="iconfont icon-shijian" style="background-color: #000;color: #fff;"></text> -->
					<span>活动报名剩余</span><span style="margin-left: 20rpx;color: red;">1天</span>
				</view>
				<view style="flex: 1;">
					<button @click="registerNow('regist')" class="bg_color"
						style="font-weight: bold;border-radius: 10px;padding: 20rpx;color:#fff"
						:color="bgColor">立即报名</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {getActivityDelAPi} from '@/api/marketing.js';
	import {
		statusFilter,
		queryStatusFilter
	} from '../components/filter.js';
	import {
		silenceBindingSpread
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				activeData: {
					name: '5.29-6.4超级满减全国',
					status: 1,
					content: "还在为如何获取更多流量而烦恼吗?还在为销量迟迟上不去而郁闷吗？还在苦于想做促销但又担心利润变小吗?",
					call: "快来报名超级满减活动吧!",
					callList: "增加曝光、销量爬坡、平台让利，多重“福利”抓在手!报名无门槛，选品更自由!",
					request: "商品范围:已剔除缺货率，客诉率较高高峰时间段打烊，7天内无动销的商品。",
					activeTime: "2024.4.17-2024.4.30",
					queryStatus: 1, //1直接生效
					activeCity: ' 嘉兴市,湖州,江门市,惠州市,成都,佛山,南区,芜湖市,深圳,广州,杭州,南京,绍兴,宁波马鞍山,合肥,无锡,上海,长沙,南宁,温州,常州,珠海,青岛,重庆,昆明,济南,贵阳,厦门,福州,北京,天津,东莞,武汉,郑州,苏一区,南昌,南通市,西安,台州市,泰州市,中山市,泉州市',
					requirements: '冻品尝鲜价专栏(冻肉、速食熟食、冷冻半成品、调理包)，限商品新客可享尝鲜价优惠价格，通过商城流量及首页固定栏目位高效转化新客!',
					activeRule: ['1、超级满减活动面向的客户范围: 全部客户', '2、活动商品范围: 选取质量稳定的商品商品清单目前由总部确定，每期活动更新']
				},
				activeInfo: {
					content: '“超级满减”是一款由平台补贴，帮助低销量品获取流量曝光，快速提升销量的营销工具。合作商报名无门槛选品更自由，平台普惠流量提报即有。核心收益如下:'
				},
				list1: [{
					name: '报名要求',
				}, {
					name: '活动介绍',
				}, {
					name: '报名建议'
				}, {
					name: '常见问题'
				}],
				// --------------活动信息--------------
				showUpInfoPopup: true,
				activeShowUpPopup: true,
				suggestShowUpPopup: true, // 报名金阿姨下拉
				commonShowUpPopup: true, //常见问题下拉
				// --------------阅读协议--------------
				isSureRead: false,
				// ----------------滚动监听-----------
				topArr: [],
				heightArr: [],
				height: 0,
				opacity: 0,
				scrollY: 0,
				scrollTop: 0,
				navH: "160",
				navList: ['报名要求', '活动介绍', '报名建议', '常见问题'],
				homeTop: 59,
				homeTopApp: 0,
				navActive: 0,
				id:'',
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'chatUrl', 'globalData']),
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			//页面中需要计算的一些值
			// #ifdef APP-PLUS
			this.homeTopApp = this.sysHeight + 8;
			// #endif
			// #ifdef H5
			this.homeTopApp = 10;
			// #endif
			this.navH = this.globalData.navHeight;
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log('res', res)
					that.height = res.windowHeight
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
					// #ifndef APP-PLUS || H5 || MP-ALIPAY
					that.navbarRight = res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
					// #endif
				},
			});
			
			that.id = options.id;
			setTimeout(function() {
				that.infoScroll();
			}, 500);

		},
		onReady() {
			this.isNodes++;
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
		},
		created(){
			this.getActivityDel();
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		// 过滤器
		filters: {
			statusFilter, // 活动状态
			queryStatusFilter
		},
		methods: {
			/** 获取活动详情 */
			getActivityDel(){
				console.log(this.id)
				getActivityDelAPi(this.id).then((res) => {
					// console.log('res',res);
					this.activeData = res.data;
				})
			},
			/**
			活动信息展开
			 */
			infoIsShow() {
				this.showUpInfoPopup = !this.showUpInfoPopup;
			},
			/**
			活动介绍
			 */
			activeIsShow() {
				this.activeShowUpPopup = !this.activeShowUpPopup;
			},
			suggestIsShow() {
				this.suggestShowUpPopup = !this.suggestShowUpPopup;
			},
			commonIsShow() {
				this.commonShowUpPopup = !this.commonShowUpPopup;
			},
			readItemChange(e) {
				if (e.detail.value == '') {
					this.isSureRead = false;
				} else {
					this.isSureRead = e.detail.value[0];
				}
			},
			/** 
			 *立即报名页面
			 */
			registerNow(type) {
				if (this.isSureRead == false) {
					uni.showToast({
						title: '请先阅读并同意',
						icon: 'error',
						duration: 2000
					});
					return
				}
				let actType = this.activeData.activityCategory;
				// type:regist立即报名活动，
				this.goPage(`/pages/marketing/choosePeroduct/choosePeroduct?type=${type}&id=${this.id}&actType=${actType}`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			
			tap: function(index) {
				var id = "past" + index;
				this.$set(this, 'navActive', index);
				this.$set(this, 'lock', true);
				this.$set(this, 'scrollTop', index > 0 ? this.topArr[index] - (this.globalData.navHeight / 2) : this
					.topArr[index]);
			},
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
				if (that.lock) {
					that.$set(that, 'lock', false)
					return;
				}
				for (var i = 0; i < that.topArr.length; i++) {
					if (scrollY < that.topArr[i] - (this.globalData.navHeight / 2) + that.heightArr[i]) {
						that.$set(that, 'navActive', i)
						break
					}
				};
				uni.$emit('scroll');
			},
			infoScroll: function() {
				var that = this,
					topArr = [],
					heightArr = [];
				for (var i = 0; i < that.navList.length; i++) { //productList
					//获取元素所在位置
					var query = uni.createSelectorQuery().in(this);
					var idView = "#past" + i;
					query.select(idView).boundingClientRect();
					query.exec(function(res) {
						// console.log('res:', res)
						var top = res[0].top;
						var height = res[0].height;
						topArr.push(top);
						heightArr.push(height);
						that.$set(that, 'topArr', topArr);
						that.$set(that, 'heightArr', heightArr);
					});
				};
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
	}

	.header_name {
		font-size: 31rpx;
		font-weight: bolder;
	}

	.problem {
		margin: 20rpx 0 15rpx 0;
		line-height: 40rpx;

		.problem-item {
			color: #000;
			font-weight: bolder;
		}
	}

	.answer {
		line-height: 40rpx;

		.answer-item {
			color: #929292;
		}
	}

	// .border-item {
	// 	border-bottom: 1px solid #f3f3f3;
	// }

	.read-contract-item {
		margin-bottom: 10rpx;
	}

	.navbar {
		position: fixed;
		// background-color: #fff;
		top: -100;
		left: 0;
		z-index: 99;
		width: 100%;
	}

	.navbar .header .item {
		position: relative;
		margin: 0 25rpx;
	}

	.navbar .header .item.on:before {
		position: absolute;
		width: 60rpx;
		height: 5rpx;
		background-repeat: no-repeat;
		content: "";
		@include linear-gradient(theme);
		bottom: -10rpx;
		left: 50%;
		margin-left: -28rpx;
	}


	.navbar .navbarH {
		position: relative;
		width: 100%;
	}

	.navbar .navbarH .navbarCon {
		position: absolute;
		bottom: 0;
		height: 100rpx;
		width: 100%;
	}

	.tab_nav {
		width: 100%;
		height: 48px;
		/* #ifdef MP */
		margin-left: 220rpx;
		/* #endif */
	}
</style>